<template>
    <div>
        <transition name="el-zoom-in-top">
            <div class="menu tabmenu" v-if="showMenu" ref="rightMenu">
                <div class="menuItem" @click="closeTag('Self')">关闭</div>
                <div class="menuItem" @click="closeTag('Right')">关闭右侧标签</div>
                <div class="menuItem" @click="closeTag('Left')">关闭左侧标签</div>
                <div class="menuItem" @click="closeTag('Other')">全部其他</div>
                <div class="menuItem" @click="closeTag('All')">全部关闭</div>
            </div>
        </transition>
        <el-tabs class="main-box" :class="{'empty' : !tabs.length}" @tab-click="handleClick" v-model="tabsValue" type="card" editable @edit="tagEvent">
            <el-tab-pane :key="item.UUID" v-for="item in tabs" :name="item.UUID" style="height:100%">
                <tabItem slot="label" :tabValue="item" @contextmenu.native.prevent="rightCLick($event,item.UUID)" @click.native.middle="tagEvent(item.UUID, 'remove')"></tabItem>
                <contentBox class="contentValue" :ref="'content-' + item.UUID" :contentValue="item"></contentBox>
            </el-tab-pane>
        </el-tabs>
        <el-drawer class="CustomDrawer DocEditor" title="" :wrapperClosable="false" show-close append-to-body :size="docEditWidth" :visible.sync="showDocEdit" :before-close="closeDrawer">
            <editDoc v-if="showDocEdit" :closeEditor="closeEditor" ref="EditObject"></editDoc>
        </el-drawer>
    </div>
</template>
<script>

const uuid = require('uuid');

import contentBox from './contentBox';
import { mapState } from "vuex";
import tabItem from './tab';
import editDoc from './editDoc';


export default {
    components: {
        editDoc,
        contentBox,
        tabItem,
    },
    data() {
        return {
            showDocEdit: false,
            docEditWidth: '500px',
            tabsValue: null,
            tabs: [],
            showMenu: false,
            rightItemActive: null,
        }
    },
    watch: {
        DOC_ACTIVE_ID(newVal, oldVal) {
            this.activeTag(newVal);
        },
    },
    computed: {
        ...mapState("doc_tree", {
            docObject: state => state.docObject,
            DOC_ACTIVE_ID: state => state.DOC_ACTIVE_ID,
        })
    },
    methods: {
        // 判断id是否在已经打开的对象中
        isInTagList(id) {
            let isHave = false;
            for (let i = 0; i < this.tabs.length; i++) {
                const tab = this.tabs[i];
                if (tab.id == id) {
                    isHave = tab;
                    break;
                };
            };
            return isHave;
        },
        // 焦点状态
        activeTag(id) {
            if (this.docObject.hasOwnProperty(id)) {
                let tagItem = this.isInTagList(id);
                if (tagItem) {
                    this.tabsValue = tagItem.UUID;
                } else {
                    let objectValue = {
                        UUID: uuid.v1(),
                        status: this.docObject[id].status,
                        id: this.docObject[id].id,
                        title: this.docObject[id].title,
                    };
                    this.tabs.push(objectValue);
                    this.tabsValue = objectValue.UUID;
                };
            };
        },
        addTag() {
            this.docEditWidth = document.body.clientWidth - 70 + 'px'
            this.showDocEdit = true;
        },
        uudiInTagList(UUID) {
            var ans = false;
            for (let i = 0; i < this.tabs.length; i++) {
                const element = this.tabs[i];
                if (element.UUID == UUID) {
                    ans = true;
                    break;
                };
            };
            return ans;
        },
        closeTag(type, targetName) {
            if (type == 'Self' && !targetName && this.showMenu) {
                targetName = this.rightItemActive;
                this.showMenu = false;
            };
            if (this.showMenu) {
                var activeObject = this.rightItemActive;
                this.showMenu = false;
                switch (type) {
                    case 'Right':
                        var closeMark = true;
                        for (let i = this.tabs.length - 1; i >= 0; i--) {
                            const element = this.tabs[i];
                            if (element.UUID == activeObject) {
                                closeMark = false;
                            };
                            if (closeMark) {
                                this.tabs.splice(i, 1);
                            };
                        };
                        if (!this.uudiInTagList(this.tabsValue)) {
                            var activeObj = this.tabs[this.tabs.length - 1]
                            this.tabsValue = activeObj.UUID;
                            this.$store.dispatch('doc_tree/setActiveId', activeObj.id);
                        };
                        break;
                    case 'Left':
                        var closeMark = false;
                        for (let i = this.tabs.length - 1; i >= 0; i--) {
                            const element = this.tabs[i];
                            if (closeMark) {
                                this.tabs.splice(i, 1);
                            };
                            if (element.UUID == activeObject) {
                                closeMark = true;
                            };
                        };
                        if (!this.uudiInTagList(this.tabsValue)) {
                            var activeObj = this.tabs[0]
                            this.tabsValue = activeObj.UUID;
                            this.$store.dispatch('doc_tree/setActiveId', activeObj.id);
                        };
                        break;
                    case 'Other':
                        for (let i = this.tabs.length - 1; i >= 0; i--) {
                            const element = this.tabs[i];
                            if (element.UUID != activeObject) {
                                this.tabs.splice(i, 1);
                            };
                        };
                        this.tabsValue = activeObject;
                        this.$store.dispatch('doc_tree/setActiveId', this.tabs[0].id);
                        break;
                    case 'All':
                        this.tabsValue = null;
                        this.tabs = [];
                        break;
                    default:
                        break;
                };
                this.clearRightMenu();
            } else if (targetName) {
                var tagIndex = 0;
                for (let i = 0; i < this.tabs.length; i++) {
                    const element = this.tabs[i];
                    if (element.UUID == targetName) {
                        tagIndex = i;
                        break;
                    };
                };
                this.tabs.splice(tagIndex, 1);
                if (tagIndex >= this.tabs.length) {
                    tagIndex = this.tabs.length - 1;
                };
                if (this.tabsValue != targetName) {
                    return;
                } else if (this.tabs.length) {
                    this.tabsValue = this.tabs[tagIndex].UUID;
                    this.$store.dispatch('doc_tree/setActiveId', this.tabs[tagIndex].id);
                } else {
                    this.tabsValue = null;
                    this.$store.dispatch('doc_tree/setActiveId', null);
                };
            };
        },
        handleClick(tab, event) {
            for (let i = 0; i < this.tabs.length; i++) {
                const tabItem = this.tabs[i];
                if (tab.name == tabItem.UUID && tabItem.id) {
                    this.$store.dispatch('doc_tree/setActiveId', tabItem.id);
                    break;
                };
            };
        },
        tagEvent(targetName, action) {
            if (action == 'add') {
                this.addTag({
                    title: '111',
                    id: null,
                    status: 'red',
                });
            } else if (action == 'remove') {
                this.closeTag('Remove', targetName);
            };
        },
        clearRightMenu() {
            this.showMenu = false;
            this.rightItemActive = null;
            document.removeEventListener('click', this.clearRightMenu);
        },
        rightCLick(event, UUID) {
            this.rightItemActive = UUID;
            this.showMenu = false;
            this.showMenu = true;
            this.$nextTick(() => {
                this.$refs.rightMenu.style.top = event.clientY + 'px';
                if (document.body.clientWidth - 155 < event.clientX) {
                    this.$refs.rightMenu.style.right = (document.body.clientWidth - event.clientX) + 'px';
                    this.$refs.rightMenu.style.left = 'auto';
                } else {
                    this.$refs.rightMenu.style.right = 'auto';
                    this.$refs.rightMenu.style.left = event.clientX + 'px';
                };
                document.addEventListener('click', this.clearRightMenu);
            });
        },
        closeDrawer() {
            this.showDocEdit = false;
        },
        closeEditor() {
            this.showDocEdit = false;
        },
    }
}

</script>
<style scoped>
    .contentValue {
        height: 100%;
    }

    .main-box.el-tabs {
        position: absolute;
        top: 0px;
        width: 100%;
        bottom: 0;
    }
</style>